<template>
  <div class="main">

    <div class="full">
    <p @click="screen">全屏</p>
    </div>

    <div class="middle">

        <div class="middleLeft">
        <!-- 用户信息 -->
        <div class="users">
        <!-- 用户头像 -->
        <div class="userimg">
        <img :src="avatarUrl" >
        </div>
        <!-- 用户名 -->
        <div class="username">
        {{userInfo.nickname}}
        <p>web开发工程师</p>
        
        </div>
        <!-- 用户设置按钮 -->
        <div class="userset">
        </div>
 
        </div>
        <!-- 日历 -->
        <div class="calendar">
            <!-- 饿了吗日历组件 -->
            <el-calendar v-model="value">
            </el-calendar>
        </div>
        </div>

        <!-- 右侧内容部分 -->
        <div class="middleRight">
        <!-- 右侧上部分内容 -->
            <div class="middleRighttop">
                <!-- 左侧小盒子 -->
                <div class="boxleft">
                    <div class="smallboxtop">早上好</div>
                    <div class="smallboxbottom">南京天气：{{this.wea}}</div>
                </div>
                <!-- 右侧小盒子 -->
                <div class="boxright">通知公告</div>
            </div>
            <!-- 右侧下部分内容 -->
            <div class="middleRightbottom">
                <!-- 饼图部分 -->
                <div class="pie">
                    <p>任务概况</p>
                    <div id="charts"></div>
                
                </div>
                <!-- 工作完成进度 -->
                <div class="plan">
                    <p>本月工作进度完成情况</p>
                    <div class="planbt">
                        <div class="planbtmain" v-for="item in this.msg">
                            <p>{{item.value}}</p>
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                
                </div>
            </div>
        </div>
        
    </div>

    <div id="footer">
        <div id="footerleft"></div>
        <div id="footerright"></div>
    
    </div>

  </div>
</template>
<script >
import { mapState } from "vuex";
import * as api from "@/api/permission";
export default {
  data() {
    return {
        value: new Date(),
        msg:'',
        wea:''
    }
  },
  meta:{
      title:'sjtj',
      name:'数据统计',
      icon:"iconfont icon-shuju2"
  },
  computed: {
    ...mapState("users", ["userInfo"]),
    avatarUrl(){
      // 如果用户没有头像，就使用默认头像，如果有，就使用用户头像
      return this.userInfo?.headimgurl
            ? this.userInfo?.headimgurl
            :'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    },
  },
  mounted() {
    this.draw()
    this.line()
    this.pie()
    this.weather()
  },
  methods: {
    draw(){
      let myChart = this.$echarts.init(document.getElementById("charts"))
      api.getdrawApi()
        .then(res=>{
            let result=res.data.data
            // console.log(result);
            this.msg=result
            myChart.setOption({
                tooltip: {
                    show:true,
                    trigger: 'item' //散点图和饼图的可以使用item触发
                },
                legend: {//表示数据的提示
                        top: '5%',//距离顶部偏移5%
                        left: 'right',//靠左排列的位置
                        top: 'bottom',//靠顶部排列的位置
                        orient: 'vertical',//排列方向 horizontal
                        itemWidth: 10, //提示框的宽度
                        itemHeight: 10,//提示框的高度
                        textStyle:{//设置字体样式
                        // color:"#fff"//颜色
                        }
                },
                color: ['#0C7BE3', '#5BA1E3', '#88B7E3',"#44BA81","#E43961",],//设置环形图颜色
                series: [ //系列
                    {
                        name: '访问来源',
                        type: 'pie',
                        center: ["30%","50%"],//调整饼图在容器中的位置 左右 上下
                        radius: ['40%', '70%'],//半径
                        avoidLabelOverlap: true, //重要属性 防止标签重叠
                        label: { //文字数据提示
                            show: true,
                            position: 'center',//可以是inner center outer设置提示位置
                            formatter: "{d}%",//\n\n很关键 能够让文字显示在牵引线上方
                            // padding: [0, -50]//文字的padding位置
                        },
                        emphasis: {//强调(当鼠标移入的时候显示的强调内容)
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: { //牵引线
                            show: true,
                            length:20, //牵引线长度
                            length2:40,
                            lineStyle: {//牵引线颜色
                                color: '#808080'
                            },
                        },
                        data: result
                    }
                ]
                }) 
                })
    },
    line(){
        let myChart = this.$echarts.init(document.getElementById("footerleft"))
        api.getlineApi()
        .then(res=>{
            let arra=[]
            let arrb=[]
            let result=res.data.data
            result.forEach(el => {
                arra.push(el.rate)
                arrb.push(el.name)
            });
            myChart.setOption({
            title:{
            },
            xAxis: {//x轴
                type: 'category',
                data: arrb,
                show: false
            },
            yAxis: {
                type: 'value',
                show: false //是否隐藏坐标轴
            },
            label: { //提示内容
                show: true,
                formatter: "{b}:{c}%" //格式化内容
            },
            legend:{
                data:['学习进度'],
                show:true,
                top:'5%',
                left:"right",
                top:"bottom"
            },
            series: [{
                name:'学习进度',
                emphasis: {//强调(当鼠标移入的时候显示的强调内容)
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        color:'hotpink',
                        formatter:"{b}:{c}%"
                    }
                },
                data: arra,
                type: 'line',
                smooth: true //是否开启平滑曲线
            }]
        })

        })
      

    },
    pie(){
        let myChart = this.$echarts.init(document.getElementById("footerright"))
        api.getpieApi()
        .then(res=>{
            let arra=[]
            let result=res.data.data
            result.forEach(el => {
                arra.push({value:el.rate,name:el.title})
            });
            myChart.setOption({
            tooltip: {
                show:true,
                trigger: 'item' //散点图和饼图的可以使用item触发
            },
            legend: {//表示数据的提示
                    top: '5%',//距离顶部偏移5%
                    left: 'right',//靠左排列的位置
                    top: 'bottom',//靠顶部排列的位置
                    orient: 'vertical',//排列方向 horizontal
                    itemWidth: 10, //提示框的宽度
                    itemHeight: 10,//提示框的高度
                    textStyle:{//设置字体样式
                    // color:"#fff"//颜色
                    }
            },
            color: ['#0C7BE3', '#5BA1E3', '#88B7E3',"#44BA81","#E43961"],//设置环形图颜色
            series: [ //系列
                {
                    name: '访问来源',
                    type: 'pie',
                    center: ["30%","50%"],//调整饼图在容器中的位置 左右 上下
                    radius: ['40%', '70%'],//半径
                    avoidLabelOverlap: true, //重要属性 防止标签重叠
                    label: { //文字数据提示
                        show: true,
                        position: 'outer',//可以是inner center outer设置提示位置
                        formatter: "{b}:{d}%",//\n\n很关键 能够让文字显示在牵引线上方
                        // padding: [0, -50]//文字的padding位置
                    },
                    emphasis: {//强调(当鼠标移入的时候显示的强调内容)
                        label: {
                            show: true,
                            fontSize: '10',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: { //牵引线
                        show: true,
                        length:10, //牵引线长度
                        length2:20,
                        lineStyle: {//牵引线颜色
                            color: '#808080'
                        },
                    },
                    data:arra
                }
            ]
        }) 
        })
    },
    weather(){
        api.getweatherApi()
        .then(res=>{
            console.log(res.data.data[0].wea);
            this.wea=res.data.data[0].wea
        })
    },
    // 点击实现全屏
    screen(){
        let element = document.documentElement;
        if (this.fullscreen) {
        if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        }
        } else {
        if (element.requestFullscreen) {
        element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
        }
            }
        }
    }
}
  

</script>
<style lang="less" scoped>
#app {
    .layout-container {
      .el-container {
        .is-vertical {
          .el-main {
            .main {
                width: 1678px;
                height: 830px;
                margin-top: 20px;
                line-height: 24px;
                .full{
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    p{
                        height: 40px;
                        font-size: 14px;
                        width: 70px;
                        border: 1px solid #ccc;
                        text-align: center;
                        line-height: 40px;
                        border-radius: 6px;
                    }
                }
                .middle{
                    height: 524px;
                    background-image: linear-gradient(135deg,#4c67ff,#5635df) ;
                    border-radius: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    .middleLeft{
                        width: 494px;
                        height: 514px;
                        margin: 5px;
                        border-radius: 4px;
                        .users{
                            width: 494px;
                            height: 208px;
                            margin-bottom: 5px;
                            background-color: #fff;
                            border-radius: 4px;
                            display: flex;
                            .userimg{
                                width: 210px;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                img{
                                    border-radius: 50%;
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                            .username{
                                width: 210px;
                                height: 100%;
                                line-height: 40px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                            }
                            .userset{
                                width: 74px;
                                height: 100%;
                            }
                        }
                        .calendar{
                            width: 494px;
                            height: 300px;
                            background-color: #fff;
                            border-radius: 4px;
                           /deep/ .el-calendar{
                                line-height: 0;
                                .el-calendar__header{
                                    padding: 4px 4px;
                                }
                                .el-calendar__body{
                                    padding: 0 0;
                                    .el-calendar-table{
                                        .el-calendar-table__row{
                                            .el-calendar-day{
                                                height: 30px;
                                                padding: 19px;
                                            }
                                        }
                                    }

                                }
                            }
                        }
                    }
                    .middleRight{
                        width: 1169px;
                        height: 514px;
                        margin: 5px;
                        border-radius: 4px;
                        margin-left: 0;
                        .middleRighttop{
                            width: 1169px;
                            height: 258px;
                            border-radius: 4px;
                            display: flex;
                            .boxleft{
                                width: 460px;
                                height: 258px;
                                border-radius: 4px;
                                margin-right: 5px;
                                .smallboxtop{
                                    width: 460px;
                                    height: 126px;
                                    background-color: #fff;
                                    border-radius: 4px;
                                    margin-bottom: 5px;
                                }
                                .smallboxbottom{
                                    width: 460px;
                                    height: 126px;
                                    background-color: #fff;
                                    border-radius: 4px;
                                    
                                }
                            }
                            .boxright{
                                width: 704px;
                                height: 258px;
                                background-color: #fff;
                                border-radius: 4px;
                            }
                        }
                        .middleRightbottom{
                            width: 1169px;
                            height: 250px;
                            background-color: #fff;
                            border-radius: 4px;
                            margin-top: 5px;
                            display: flex;
                            .pie{
                                width: 584px;
                                height: 100%;
                                p{
                                    text-align: left;
                                    padding-left: 30px;
                                    margin-top: 10px;
                                    font-size: 16px;
                                    font-weight: 900;
                                    color:#666666
                                }
                                #charts{
                                    width: 460px;
                                    height: 200px;
                                }
                            }
                            .plan{
                                width: 584px;
                                height: 100%;
                                p{
                                    text-align: center;
                                    margin-top: 50px;
                                    font-size: 16px;
                                    font-weight: 900;
                                    color:#666666
                                }
                                .planbt{
                                    width: 584px;
                                    height: 176px;
                                    display: flex;
                                    justify-content: space-around;
                                    .planbtmain{
                                        height: 176px;
                                        width: 80px;
                                        p{
                                            margin-top: 26px;
                                        }
                                    }
                                }


                            }
                        }
                    }

                }
                #footer{
                    width: 100%;
                    height: 276px;
                    border-radius: 4px;
                    display: flex;
                    #footerleft{
                        width: 839px;
                        height: 240px;
                    }
                    #footerright{
                        width: 700px;
                        height: 240px;

                    }
                }
            }
            
          }
        }
      }
    }

}
</style>